/* 正向流动效果 */
.svg_ani_flow {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: ani_flow 10s linear infinite;
  animation-fill-mode: forwards;
  -webkit-animation: ani_flow 10s linear infinite;
  -webkit-animation-fill-mode: forwards;
}

@keyframes ani_flow {
  from {
    stroke-dasharray: 10, 5;
  }

  to {
    stroke-dasharray: 13, 5;
  }
}
@-webkit-keyframes ani_flow {
  from {
    stroke-dasharray: 10, 5;
  }

  to {
    stroke-dasharray: 13, 5;
  }
}

/* 停止流动效果 */
.svg_ani_flow_stop {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: ani_flow_stop 10s linear infinite;
  animation-fill-mode: forwards;
  -webkit-animation: ani_flow_stop 10s linear infinite;
  -webkit-animation-fill-mode: forwards;
}

@keyframes ani_flow_stop {
  from {
    stroke-dasharray: 10, 5;
  }

  to {
    stroke-dasharray: 10, 5;
  }
}
@-webkit-keyframes ani_flow_stop {
  from {
    stroke-dasharray: 10, 5;
  }

  to {
    stroke-dasharray: 10, 5;
  }
}
/* 反向流动效果 */
.svg_ani_flow_back {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: ani_flow_back 10s linear infinite;
  animation-fill-mode: forwards;
  -webkit-animation: ani_flow_back 10s linear infinite;
  -webkit-animation-fill-mode: forwards;
}

@keyframes ani_flow_back {
  from {
    stroke-dasharray: 13, 5;
  }

  to {
    stroke-dasharray: 10, 5;
  }
}
@-webkit-keyframes ani_flow_stop {
  from {
    stroke-dasharray: 10, 5;
  }

  to {
    stroke-dasharray: 10, 5;
  }
}
/* 以最大40高度填充 */
.svg_ani_fill_h40 {
  animation: ani_fill_h40 5s linear infinite;
  animation-fill-mode: forwards;
  -webkit-animation: ani_fill_h40 5s linear infinite;
  -webkit-animation-fill-mode: forwards;
}

@keyframes ani_fill_h40 {
  from {
    height: 0px;
  }

  to {
    height: 40px;
  }
}
@-webkit-keyframes ani_flow_stop {
  from {
    stroke-dasharray: 10, 5;
  }

  to {
    stroke-dasharray: 10, 5;
  }
}
/*------------------------- 文字效果----------------------- */
.textStroke {
  text-transform: uppercase;
  animation-delay: -6.5s;
  stroke-width: 0.5px;
  stroke-dasharray: 500 100;
  animation: textStrokeMethod 12s infinite linear;
}

@keyframes textStrokeMethod {
  0% {
    stroke-dashoffset: 200;
  }

  100% {
    stroke-dashoffset: -400;
  }
}
/*---------------------------------------------------------*/
